              
// import * as echarts from '../../../../ec-canvas/echarts';
// import { getTimeStm } from '../../../../utils/util.js';
// const systemInfo = wx.getSystemInfoSync();

// Component({
//   properties: {
//   },

//   data: {
//     ec: {
//       lazyLoad: true
//     },
//   },
//   ready() {
//   },
//   pageLifetimes: {

//   },
//   methods: {
//     countEcharts(data) {
//       let mychart = this.selectComponent("#mychart-dom-bar");
//       mychart.init((canvas, width, height) => {
//         const Chart = echarts.init(canvas, null, {
//           width: width,
//           height: height
//         });
//         Chart.setOption(this.getBarOption(data))
//       })
//     },

//     // 配置bar
//     getBarOption(data) {
//       console.log('趋势评估',data)
//       // 添加事件标记区间和断线标记区间
//       let markAreaData = [];
//       // let markLineData = [];
//       // shutdownTime为断线标记区间
//       let shutdownTime = data.result.shutdownTime || [];
//       shutdownTime.forEach(item => {
//         let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
//         if (item.timeLabS === item.timeLabE) {
//           markAreaData.push([{
//             name: name.join("\n"),
//             xAxis: item.timeLabS,
//             emphasis: { label: { show: false }, itemStyle: { color: '#cccccc' } },
//             itemStyle: {
//               color: '#cccccc',
//               borderWidth: 1,
//               borderColor: '#cccccc',
//               borderType: 'solid'
//             }
//           }, {
//             xAxis: item.timeLabE,
//             emphasis: { label: { show: false }, itemStyle: { color: '#cccccc' } },
//             itemStyle: {
//               color: '#cccccc',
//               borderWidth: 1,
//               borderColor: '#cccccc',
//               borderType: 'solid'
//             }
//           }])
//         } else {
//           markAreaData.push(
//             [
//               {
//                 name: name.join("\n"),
//                 xAxis: item.timeLabS,
//                 emphasis: { label: { show: false }, itemStyle: { color: "#cccccc" } },
//                 itemStyle: { color: "#cccccc" }
//               },
//               {
//                 xAxis: item.timeLabE,
//                 emphasis: { label: { show: false }, itemStyle: { color: "#cccccc" } },
//                 itemStyle: { color: "#cccccc" }
//               },
//             ]
//           )
//         }
//       })
//       // events为事件标记区间
//       let events = data.events || [];
//       events.forEach(item => {
//         let name = [];
//         item.forEach(childItem => {
//           name.push(`开始时间：${childItem.startTime}\n结束时间：${childItem.endTime}\n描述：${childItem.comment}`);
//         });
//         data.events.forEach(parentItem => {
//           parentItem.forEach(childItem => {
//             if (getTimeStm(childItem.timeLabS) > getTimeStm(item[0].timeLabS) && getTimeStm(childItem.timeLabE) < getTimeStm(item[0].timeLabE)) {
//               name.push(`开始时间：${childItem.startTime}\n结束时间：${childItem.endTime}\n描述：${childItem.comment}`);
//             }
//           });
//         });

//         item.forEach(childItem => {
//           if (childItem.timeLabS === childItem.timeLabE) {
//             // markLineData.push({
//             //   name: name.join("\n"),
//             //   xAxis: childItem.timeLabS,
//             //   emphasis: { label: { show: false } },
//             //   lineStyle: {
//             //     type: "solid",
//             //     color: '#ff0000'
//             //   },
//             // })
//             // 这里不知什么原因 用markLine的时候不显示 只能用markArea设置border的方法设置  
//             // 但是设置border的类型不起效果一直显示的是直线
//             markAreaData.push([{
//               name: name.join("\n"),
//               xAxis: childItem.timeLabS,
//               emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,92,92,1)' } },
//               itemStyle: { 
//                 color: 'rgba(255,92,92,1)',
//                 borderWidth: 1,
//                 borderColor: 'rgba(255,92,92,1)',
//                 borderType: 'dashed'
//               }
//             }, {
//               xAxis: childItem.timeLabE,
//               emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,92,92,1)' } },
//               itemStyle: { 
//                 color: 'rgba(255,92,92,1)',
//                 borderWidth: 1,
//                 borderColor: 'rgba(255,92,92,1)',
//                 borderType: 'dashed'
//               }
//             }])
//           } else {
//             markAreaData.push([{
//               name: name.join("\n"),
//               xAxis: childItem.timeLabS,
//               emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,92,92,1)' } },
//               itemStyle: { color: 'rgba(255,92,92,1)' }
//             }, {
//               xAxis: childItem.timeLabE,
//               emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,92,92,1)' } },
//               itemStyle: { color: 'rgba(255,92,92,1)' }
//             }])
//           }
//         })
//       });
//       let option = {
//         animation: false,
//         legend: {
//           data: ['趋势性评估', '稳定性评估'], 
//           top: 0,
//           itemStyle: {
//             normal: {
//               lineStyle: {
//                 color: "#fff"
//               }
//             }
//           },
//           textStyle: {
//             color: "#BAD7FF",
//             fontSize: 9,
//           }
//         },
//         tooltip: {
//           trigger: 'axis',
//           extraCssText: "z-index:98"
//         },
//         xAxis: {
//           type: 'category',
//           data: data.result.labels,
//           splitLine: {
//             show: false
//           },

//           nameTextStyle: {
//             color: "#BAD7FF",
//             fontSize: 12,

//           },
//           axisLabel: {
//             margin: 10,
//             color: "#BAD7FF",
//             fontSize: 9
//           },
//           axisLine: {
//             lineStyle: {
//               color: '#39529A'
//             }
//           }
//         },
//         yAxis: {
//           type: 'value',
//           // name: '健康度',
//           nameGap: 8,
//           min: 0,
//           max: 100,
//           boundaryGap: true,
//           nameTextStyle: {
//             color: "#BAD7FF",
//             fontSize: 12,
//           },
//           axisTick: {
//             inside: false,
//             alignWithLabel: true,
//           },
//           splitLine: {
//             show: false
//           },
//           axisLabel: {
//             formatter: '{value}',
//             color: "#BAD7FF",
//             fontSize: 9,
//           },
//           z: 10,
//           axisLine: {
//             lineStyle: {
//               color: '#39529A'
//             }
//           }
//         },
//         grid: {
//           top: 24,
//           left: 50,
//           right: 30,
//           bottom: 26,
//           height: systemInfo.screenWidth <= 360 && 80 || 110
//         },
//         dataZoom: [{
//           type: 'inside',
//           throttle: 50
//         }],
//         series: [
//           {
//             name: '趋势性评估',
//             type: 'line',
//             smooth: true,
//             symbol: 'circle',
//             symbolSize: 5,
//             sampling: 'average',
//             stack: 'a',
//             data: data.result.health1,
//             color: '#98CA00',
//             areaStyle: {
//               normal: {
//                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                   offset: 0,
//                   color: 'rgba(152,202,0,0.5)',
//                 }, {
//                   offset: 1,
//                     color: 'rgba(152,202,0,0.1)',
//                 }])
//               }
//             },
//             markArea: {
//               label: {
//                 show: false
//               },
//               data: markAreaData,
//             },
//             // markLine: {
//             //   symbol: "none",
//             //   label: {
//             //     show: false
//             //   },
//             //   data: markLineData,
//             //   z: 10
//             // }
//           },
//           {
//             name: '稳定性评估',
//             type: 'line',
//             smooth: true,
//             symbol: 'circle',
//             symbolSize: 5,
//             sampling: 'average',
//             stack: 'b',
//             data: data.result.health,
//             color: '#E7B66F',
//             areaStyle: {
//               normal: {
//                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                   offset: 0,
//                   color: 'rgba(231,182,111,0.5)',
//                 }, {
//                   offset: 1,
//                     color: 'rgba(231,182,111,0.1)',
//                 }])
//               }
//             },
//             markArea: {
//               label: {
//                 show: false
//               },
//               data: markAreaData,
//             },
//             // markLine: {
//             //   symbol: "none",
//             //   label: {
//             //     show: false
//             //   },
//             //   data: markLineData,
//             //   z: 10
//             // }
//           },
//         ]
//       };
//       return option;
//     },
//   }
// })
import * as echarts from '../../../../ec-canvas/echarts';
import { getTimeStm } from '../../../../utils/util.js';
const systemInfo = wx.getSystemInfoSync();

Component({
  properties: {
  },

  data: {
    ec: {
      lazyLoad: true
    },
  },
  ready() {
  },
  pageLifetimes: {

  },
  methods: {
    countEcharts(data) {
      let mychart = this.selectComponent('#mychart-dom-bar');
      mychart.init((canvas, width, height) => {
        let chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.getBarOption(chart, data)
        // let startTime = 0;
        chart.on('mousedown', (param) => {
          // startTime = new Date().getTime();
          if (param.componentType === "markArea" || param.componentType === "markLine") {
            this.triggerEvent("showArea", param.name)
          }
          // 如果是点击事件弹出添加事件的框就打开下面注释
          // if (param.componentType === 'series') {
          //   this.triggerEvent("showAddEvent")
          // }
        })
        var g_clickTime = null;
        var g_TimeFn = null;
        var g_onItemName = null;
        chart.on("click", params => {
          console.log(params)
          var myDate = new Date();
          if (g_clickTime == null) {
            //第一次进来
            g_clickTime = myDate.getMilliseconds();
            g_onItemName = params.name;
            //起一个定时器，进行重置
            g_TimeFn = setTimeout(function () {
              //要执行的代码
              g_clickTime = null;
            }, 300);
          } else {
            clearTimeout(g_TimeFn);
            //第二次进来，
            if (Math.abs(myDate.getMilliseconds() - g_clickTime) < 300 && g_onItemName == params.name) {
              //是双击操作
              console.log(params);
              this.triggerEvent("showAddEvent")
            }
            g_clickTime = null;
          }
        })
        // 如果是点击事件弹出添加事件的框就注释下面的代码
        // chart.on('mousemove',(param) => {
        //   if (param.componentType === 'series') {
        //     if ((new Date().getTime() - startTime) > 500) {
        //       this.triggerEvent("showAddEvent")
        //     }
        //   }
        //   startTime = 0;
        // })
        // 手势抬起事件
        // chart.on('mouseup',(param) => {
        //   console.log(new Date().getTime() - startTime)
        //   if (param.componentType === 'series') {
        //     if ((new Date().getTime() - startTime) > 500) {
        //       this.triggerEvent("showAddEvent")
        //     }
        //   }
        //   startTime = 0;
        // })
        return chart
      })
    },

    // 配置bar
    getBarOption(chart,data) {
      console.log('趋势评估', data)
      // 添加事件标记区间和断线标记区间
      let markAreaData = [];
      let markLineData = [];
      // shutdownTime为断线标记区间
      let shutdownTime = data.result.shutdownTime || [];
      shutdownTime.forEach(item => {
        let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
        if (item.timeLabS === item.timeLabE) {
          markLineData.push({
            name: name.join("\n"),
            xAxis: item.timeLabS,
            emphasis: { label: { show: false } },
            lineStyle: {
              type: "solid",
              color: 'rgba(255,255,255,0.2)'
            },
          })
          // markAreaData.push([{
          //   name: name.join("\n"),
          //   xAxis: item.timeLabS,
          //   emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,255,255,0.2)' } },
          //   itemStyle: {
          //     color: 'rgba(255,255,255,0.2)',
          //     borderWidth: 1,
          //     borderColor: 'rgba(255,255,255,0.2)',
          //     borderType: 'solid'
          //   }
          // }, {
          //   xAxis: item.timeLabE,
          //   emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,255,255,0.2)' } },
          //   itemStyle: {
          //     color: 'rgba(255,255,255,0.2)',
          //     borderWidth: 1,
          //     borderColor: 'rgba(255,255,255,0.2)',
          //     borderType: 'solid'
          //   }
          // }])
        } else {
          markAreaData.push(
            [
              {
                name: name.join("\n"),
                xAxis: item.timeLabS,
                emphasis: { label: { show: false }, itemStyle: { color: "rgba(255,255,255,0.2)" } },
                itemStyle: { color: "rgba(255,255,255,0.2)" }
              },
              {
                xAxis: item.timeLabE,
                emphasis: { label: { show: false }, itemStyle: { color: "rgba(255,255,255,0.2)" } },
                itemStyle: { color: "rgba(255,255,255,0.2)" }
              },
            ]
          )
        }
      })
      // events为事件标记区间
      let events = data.result.events || [];
      events.forEach(item => {
        let name = [];
        item.forEach(childItem => {
          name.push(`开始时间：${childItem.startTime}\n结束时间：${childItem.endTime}\n描述：${childItem.comment}`);
        });
        data.result.events.forEach(parentItem => {
          parentItem.forEach(childItem => {
            if (getTimeStm(childItem.timeLabS) > getTimeStm(item[0].timeLabS) && getTimeStm(childItem.timeLabE) < getTimeStm(item[0].timeLabE)) {
              name.push(`开始时间：${childItem.startTime}\n结束时间：${childItem.endTime}\n描述：${childItem.comment}`);
            }
          });
        });

        item.forEach(childItem => {
          if (childItem.timeLabS === childItem.timeLabE) {
            markLineData.push({
              name: name.join("\n"),
              xAxis: childItem.timeLabS,
              emphasis: { label: { show: false } },
              lineStyle: {
                type: "dashed",
                // color: 'rgba(169,104,104,.2)'
                color: '#E7B66F'
              },
            })
            // 这里不知什么原因 用markLine的时候不显示 只能用markArea设置border的方法设置  
            // 但是设置border的类型不起效果一直显示的是直线
            // markAreaData.push([{
            //   name: name.join("\n"),
            //   xAxis: childItem.timeLabS,
            //   emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,92,92,1)' } },
            //   itemStyle: {
            //     color: 'rgba(255,92,92,1)',
            //     borderWidth: 1,
            //     borderColor: 'rgba(255,92,92,1)',
            //     borderType: 'dashed'
            //   }
            // }, {
            //   xAxis: childItem.timeLabE,
            //   emphasis: { label: { show: false }, itemStyle: { color: 'rgba(255,92,92,1)' } },
            //   itemStyle: {
            //     color: 'rgba(255,92,92,1)',
            //     borderWidth: 1,
            //     borderColor: 'rgba(255,92,92,1)',
            //     borderType: 'dashed'
            //   }
            // }])
          } else {
            markAreaData.push([{
              name: name.join("\n"),
              xAxis: childItem.timeLabS,
              emphasis: { label: { show: false }, itemStyle: { color: 'rgba(169,104,104,.2)' } },
              itemStyle: { color: 'rgba(169,104,104,.2)' }
            }, {
              xAxis: childItem.timeLabE,
              emphasis: { label: { show: false }, itemStyle: { color: 'rgba(169,104,104,.2)' } },
              itemStyle: { color: 'rgba(169,104,104,.2)' }
            }])
          }
        })
      });
      let option = {
        animation: false,
        legend: {
          data: ['趋势性评估', '稳定性评估'],
          top: 0,
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          textStyle: {
            color: "#BAD7FF",
            fontSize: 9,
          }
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
          extraCssText: "z-index:98",
          formatter: function (params) {
            let result = params[0].name;
            params.forEach(function (item) {
              if (item.data) {
                result += "\n" + item.seriesName + ": " + item.data;
              }
            });
            return result;
          }
        },
        xAxis: {
          type: 'category',
          data: data.result.labels,
          boundaryGap: false,
          splitLine: {
            show: false
          },

          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,

          },
          axisLabel: {
            margin: 10,
            color: "#BAD7FF",
            fontSize: 9
          },
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        yAxis: {
          type: 'value',
          // name: '健康度',
          nameGap: 8,
          min: 0,
          max: 100,
          boundaryGap: true,
          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,
          },
          axisTick: {
            inside: false,
            alignWithLabel: true,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}',
            color: "#BAD7FF",
            fontSize: 9,
          },
          z: 10,
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        grid: {
          top: 24,
          left: 50,
          right: 30,
          bottom: 26,
          height: systemInfo.screenWidth <= 360 && 80 || 110
        },
        dataZoom: [{
          type: 'inside',
          throttle: 50
        }],
        series: [
          {
            name: '趋势性评估',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            sampling: 'average',
            stack: 'a',
            data: data.result.health1,
            color: '#98CA00',
            itemStyle: {
              normal: {
                color: "#98CA00",
                borderWidth: 20,
                borderColor: "transparent",
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(152,202,0,0.5)',
                }, {
                  offset: 1,
                  color: 'rgba(152,202,0,0.1)',
                }])
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markAreaData,
            },
            markLine: {
              symbol: "none",
              label: {
                show: false
              },
              data: markLineData,
              z: 10
            }
          },
          {
            name: '稳定性评估',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            sampling: 'average',
            stack: 'b',
            data: data.result.health,
            color: '#E7B66F',
            itemStyle: {
              normal: {
                color: '#E7B66F',
                borderWidth: 20,
                borderColor: "transparent",
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(231,182,111,0.5)',
                }, {
                  offset: 1,
                  color: 'rgba(231,182,111,0.1)',
                }])
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markAreaData,
            },
            markLine: {
              symbol: "none",
              label: {
                show: false
              },
              data: markLineData,
              z: 10
            }
          },
        ]
      };
      chart.setOption(option)
    },
  }
})